<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px;  overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      /> 
    </div>  
    <div >
      <el-form ref="formObj" :rules="rules" style="display: flex;">
          <el-input  v-if="!props.id" maxlength="28" v-model="params.title" style="margin-top: 10px;" placeholder="请输入公告标题(一但保存便不能修改)"></el-input>
           <div class="m-4" v-if="!props.id">
              <el-select
                v-model="params.userId"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                placeholder="请选择公告接收人"
                style="width: 240px;margin-top: 10px;" >
                  <el-option
                    v-for="item in users"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
              </el-select>
           </div>
         <el-button type="primary" @click="submit" style="margin-left: auto; margin-top: 10px;">保存</el-button>
      </el-form> 
    </div>
</template>

<script setup>  
import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'  
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'  
import { get,post } from '@/plugins/axios'
import { ElMessage } from 'element-plus'
import path from "./path"
const props = defineProps(['id'])
const emits = defineEmits(['update:show','getTableData'])
import '@wangeditor/editor/dist/css/style.css' // 引入 css  
const users = ref([
  {
    id: 0,
    name: '全部用户' 
  }
])
getUser()
function getUser(){
  get(path.allUser,null,content => {
      // 将两个数组进行合并
      users.value = users.value.concat(content); 
      console.dir(users.value)
  })
}

if(props.id){
  console.dir(props.id)
  get(path.getById,{id:props.id},content => {
    params.title = content.title
    valueHtml.value = content.content
  })
}

// 编辑器实例，必须用 shallowRef  
const editorRef = shallowRef(null)  
  
// 内容 HTML  
const valueHtml = ref()  
const params = reactive({
  userId: '',
  title: '',
  open: true,
})
const toolbarConfig = {}  
const editorConfig = { placeholder: '请输入公告内容' }  
  
// 提交和修改
function submit(){
  if(!props.id){
    get(path.check,{title:params.title},content => {
          if(content == false) {
            ElMessage({message:'该标题已经被占用了！',type:'warning'})
          } else {
            for(let i = 0;i<params.userId.length;i++){
              if(params.userId[i] == 0){
                params.userId = [0];
                break;
              }
            }
            console.dir(params.userId)
             post(path.save,{
              id: props.id,
              content: valueHtml.value,
              title:params.title,
              userId: params.userId
            },content => {
              emits('update:show', false)
              emits('getTableData')
            })
          }
    })
  } else {
      post(path.update,{
      id: props.id,
      content: valueHtml.value,
      title:params.title,
      userId: params.userId
    },content => {
      emits('update:show', false)
      emits('getTableData')
    })
  }
}

// 组件销毁时，也及时销毁编辑器  
onBeforeUnmount(() => {  
    const editor = editorRef.value  
    if (editor) {  
        editor.destroy()  
    }  
})  
  
// 编辑器创建时的回调  
const handleCreated = (editor) => {  
    editorRef.value = editor // 记录 editor 实例，重要！  
}  
  
</script>  